<template>
	<view class="fuyao-body tn-padding-sm">
		<view class="view1 tn-margin-bottom-sm">
			<!-- <view class="avatar-item tn-float-left">
				<tn-avatar v-if="avatar" :src="childAvatar"></tn-avatar>
				<tn-avatar v-else src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
				
			</view> -->
			<view class="tn-float-left names-view" style="font-size: 36rpx;font-weight: bold;">
				{{childName}}的服药记录
			</view>
		</view>
		<view style="margin-bottom: 16rpx;">
			<tn-list-cell :arrow="true" unlined radius >
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						服药时间
					</view>
					<view class="tn-padding-right" @click="showFunction">
						<text v-if="!fuyaoshijian" class="tn-padding-right">请选择</text>
						<text v-else class="tn-padding-right">{{fuyaoshijian}}</text>
					</view>
				</view>
			</tn-list-cell>
		</view>
		<!-- <view class="view-item">
			<view class="tn-float-left left-view">
				<text class="tn-color-red tn-padding-right-sm">*</text>
				<text>服药时间</text>
			</view>
			<view class="tn-float-right right-view tn-text-right tn-padding-right-sm" @click="showFunction">
				<text v-if="!fuyaoshijian" class="tn-padding-right">请选择</text>
				<text v-else class="tn-padding-right">{{fuyaoshijian}}</text>
				<text> > </text>
			</view>
		</view> -->
		<view style="margin-bottom: 16rpx;">
			<tn-list-cell unlined radius>
				<view class="tn-flex tn-flex-row-between border-line-view">
					<view class="width-150 tn-text-left">
						药品名称
					</view>
					<view class="">
						<tn-input class="mingc-inp" v-model="yaopinmingcheng" placeholder="请输入药品名称" type="text" :height="40" />
					</view>
				</view>
			</tn-list-cell>
		</view>
		
		<!-- <view class="view-item">
			<view class="tn-float-left tn-padding-right left-view">
				<text class="tn-color-red tn-padding-right-sm">*</text>
				<text>药品名称</text>
			</view>
			<view class="tn-float-left right-view">
				<tn-input class="mingc-inp" v-model="yaopinmingcheng" placeholder="请输入药品名称" type="text" :height="60" :border="true" />
			</view>
		</view> -->
		<view class="view-item">
			<view class="tn-padding-right left-view" style="margin-bottom: 16rpx;">
				<text class="tn-color-red tn-padding-right-sm">*</text>
				<text>服药说明</text>
			</view>
			<view class="">
				<tn-input class="mingc-inp" v-model="fuyaoshuoming" placeholder="药品用法与剂量，如***药：口服，30mg。" type="textarea" :height="200" :border="true" />
			</view>
		</view>
		<view class="view-item">
			<view class="tn-float-left tn-padding-right" style="margin-bottom: 16rpx;">
				<text class="tn-color-red tn-padding-right-sm">*</text>
				<text class="tn-padding-right-sm">药品图片</text>
			</view>
			<view class="img-content">
				<view class="img-up-view">
				  <view class="imgs-content-view">
					  <view v-for="(item,index) in filePathList" :key="index" class="tn-image-upload__item">
						<image class="tn-image-upload__item__image" :src="item" mode="aspectFill" @click="showImage(item)"></image>
						<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
					  </view>
					<view v-if="filePathList.length < 9" class="upload-view-cls" @touchend="getLocalImg">
						<text class="tn-icon-add"></text>
					</view>
				  </view>
				</view>
				<view style="font-size: 22rpx;color:#79CF67;">上传药品图片，方便老师更好的找到药品</view>
			</view>
		</view>
		
		<view class="tn-padding-sm bottom-view">
				<tn-button width="100%" backgroundColor="#79CF67" fontColor="#ffffff" shape="round" @click="uploadImgs">提交</tn-button>
		</view>
		<tn-picker mode="time" v-model="showtimepicker" :params="params" @confirm="timeconfirm"></tn-picker>
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				fuyaoshijian: '',
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				showtimepicker: false,
				yaopinmingcheng: '',
				fuyaoshuoming: '',
				filePathList: [],
				fileList: [],
				imageTitle: '',
				childName: '',
				childAvatar: '',
				avatar: '',
				dengjiyaotu: []
				
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getDetail()
		},
		mounted() {
			let userInfo = uni.getStorageSync('userInfo');
			this.childName = userInfo.childName
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.avatar = userInfo.childAvatar
			this.childAvatar = this.imageTitle + this.avatar
			
		},
		methods:{
			getDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/MRegister/Get',
					method: 'get',
					params: {
						id: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						this.yaopinmingcheng = res.data.name
						this.fuyaoshuoming = res.data.explain
						this.fuyaoshijian = res.data.medicationTime
						this.filePathList = []
						this.dengjiyaotu = []
						if(res.data.drugsImage){
							res.data.drugsImage.forEach(item => {
								this.dengjiyaotu.push(item.filedId)
								this.filePathList.push(this.imageTitle + item.filedId)
							})
						}
						
					}
				})
			},
			addFunction(imgIdArr){
				let fileIdArr = imgIdArr
				if(this.detailId){
					fileIdArr = fileIdArr.concat(this.dengjiyaotu)
				}
				let obj = {
				  "id": this.detailId?this.detailId:null,
				  "name": this.yaopinmingcheng,
				  "explain": this.fuyaoshuoming,
				  "medicationTime": this.fuyaoshijian,
				  "imageIdList": fileIdArr,
				  "autographImg": ""
				}
				uni.setStorageSync('fydjInfo', obj)
				uni.navigateTo({
					url: '/pagesA/fuyao/qianming'
				})	
			},
			goDetail(item){
				
			},
			showFunction(){
				this.showtimepicker = true
			},
			timeconfirm(val){
				let yy = new Date().getFullYear()
				this.fuyaoshijian =yy+'-'+ val.month + '-' + val.day + ' ' + val.hour + ":" + val.minute+ ":00"
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1);
				this.filePathList.splice(index, 1)
			},
			showImage(item){
				this.previewImg = item;
			},
			getLocalImg(){
				if(this.fileList.length >= 9){
					return;
				}
				wx.chooseImage({
				   success: chooseResult => {
						console.log(chooseResult)
						chooseResult.tempFiles.forEach((item, index) => {
							if(this.fileList.length < 9){
								this.fileList.push(item)
								this.filePathList.push(chooseResult.tempFilePaths[index])
							}
						})
						console.log(this.fileList, this.filePathList)
					}
				})
			},
			
			uploadImgs(){
				
				if(!this.fuyaoshijian){
					this.$refs.toast.show({
					  title: '',
					  content: '请选择服药时间',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.yaopinmingcheng){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写药品名称',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				if(!this.fuyaoshuoming){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写服药说明',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				 let that = this;
				 let imgIdArr = [];
				 if(!this.fileList.length){
					if(!this.detailId){
						this.$refs.toast.show({
							  title: '',
							  content: '请上传药品图片',
							  icon: 'fail',
							  image: '',
							  duration: 1500
							})
						return;					 
					}else{
						that.addFunction([])
					}
				 }
				this.fileList.forEach(item => {
					this.uploadPhoto(item, item.path, (resData) => {
						if(resData.code == 200){
							imgIdArr.push(resData.data)
							if(imgIdArr.length == this.fileList.length){
								that.addFunction(imgIdArr)
							}
						}
					})
				})
			},
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						console.log(err)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fuyao-body{
		min-height: 100vh;
		background-color: rgba(245, 245, 245, 1);
		padding: 26rpx;
	}
	.view1{
		overflow: hidden;
	}
	.avatar-item{
		height: 80rpx;
		line-height: 80rpx;
	}
	.names-view{
		margin-left: 20rpx;
		line-height: 80rpx;
	}
	.view-item{
		min-height: 100rpx;
		background: #ffffff;
		border-radius: 16rpx;
		padding: 26rpx 30rpx;
		margin-bottom: 16rpx;
	}
	.mingc-inp{
		width: 100%;
		margin-top: 18rpx;
		background-color: #ffffff;
	}
	.right-view{
		width: calc(100% - 200rpx);
	}
	.left-view{
		width: 200rpx;
	}
	.img-up-view{
		margin-bottom: 30rpx;
	}
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
		  float: left;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }
  .tn-image-upload__custom-btn {
    background-color: $tn-font-holder-color;
    width: 100%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
  }
	.tn-image-upload__item {
	    width: 190rpx;
	    height: 190rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	    &__image {
	      width: 100%;
	      height: 100%;
	      border-radius: 30rpx;
	    }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 30rpx;
			  color: #333333;
			  line-height: 36rpx;
		  }
	  }
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 36rpx;
			  z-index: 888;
			  color: #333333;
			  line-height: 36rpx;
		  }
	  }
	  .imgs-content-view{
		  overflow: hidden;
	  }
	  .upload-view-cls{
		  width: 190rpx;
		  height: 190rpx;
		  border: 1px solid #dddddd;
		  float: left;
		  line-height: 190rpx;
		  text-align: center;
		  .tn-icon-add{
			  font-size: 80rpx;
		  }
	  }
	.img-content{
		overflow: hidden;
		width: 100%;
	}
	  .bottom-view{
		  position: fixed;
		  bottom: env(safe-area-inset-bottom);
		  left: 0rpx;
		  width: 100%;
		  z-index: 11;
		  background-color: rgba(245, 245, 245, 1);
	  }
</style>